main {
    height: 100%;
    width: 100%;
}
#head {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 5;
    width: 100%;
}

.custom-sort-box {
    position: fixed;
    top: 54px;
    left: 0;
    right: 0;
    z-index: 4;

    .custom-sort-hd {
        background: #fff;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        height: 40px;
        font-size: 14px;
        border-bottom: 1px solid #d9d9d9;
        position: relative;
        z-index: 6;
    
        > div {
            -webkit-box-flex: 1;
            -ms-flex-positive: 1;
            flex-grow: 1;
            -ms-flex-item-align: center;
            align-self: center;
            text-align: center;
    
            &.active {
                color: #dd1a21;
            }
    
            &.custom-price-box {
                .custom-sort-title {
                    &::after {
                        background-image: url("https://yanxuan-static.nosdn.127.net/hxm/yanxuan-node-wap/style/img/normal-14f3231e0b85ff2d27cb9f66a14bd67b.png");
                        display: inline-block;
                        vertical-align: middle;
                        width: 8px;
                        height: 11px;
                        background-size: 211px 144px;
                        background-position: -193px -93px;
                        content: " ";
                        margin-left: 6px;
                        margin-top: -4px;
                    }
                }
            }
        }
    }

    .custom-sort-bd {
        background: #fff;

        .m-priceSort {
            position: absolute;
            background-color: #fff;
            width: 100%;
            z-index: 20;
            // display: none;
            box-shadow: 0 2px 3px -1px #ddd;

            .form {
                padding: 20px 15px 0;

                .formGroup {
                    margin-bottom: 20px;
                    display: -webkit-box;
                    display: -moz-flex;
                    display: -ms-flexbox;
                    display: flex;
                    -ms-flex-flow: row nowrap;
                    -webkit-box-orient: horizontal;
                    -webkit-box-direction: normal;
                    flex-flow: row nowrap;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    -moz-align-items: center;
                    align-items: center;

                    .label {
                        font-size: 14px;
                        color: #333;
                        margin-right: 12px;
                    }

                    .ipt {
                        width: 135px;
                        height: 28px;
                        border: 1px solid #7f7f7f;
                        border-radius: 2px;
                        text-align: center;
                        font-size: 14px;
                        line-height: 28px;
                        color: #333;
                    }

                    .line {
                        display: inline-block;
                        margin: 0 11px;
                        width: 11px;
                        height: 1px;
                        background: #7f7f7f;
                    }

                    .smallBtn {
                        margin-right: 12px;
                        width: 104px;
                        height: 28px;
                        text-align: center;
                        background-color: #fff;
                        border: 1px solid #7f7f7f;
                        border-radius: 2px;
                        font-size: 14px;
                        line-height: 28px;
                        color: #333;
                        cursor: pointer;

                        &.curr {
                            border-color: #b4282d;
                            color: #b4282d;
                        }
                    }
                }
            }

            .btnGroup {
                
                .btn {
                    width: 50%;
                    text-align: center;
                    height: 1.04rem;
                    font-size: .28rem;
                    color: #333;
                    line-height: 1.04rem;
                    border: none;
                    border-top: 1px solid #d9d9d9;
                    background: #fff;

                    &.cancel {
                        border-right: 1px solid #d9d9d9;
                    }

                    &.ok {
                        color: #dd1a21;  
                    }
                }
            }

        }

        .mulitiValsDropdown {
            position: absolute;
            z-index: 20;
            top: 100%;
            left: 0;
            width: 100%;
            overflow-y: scroll;
            max-height: 150px;
            padding: 20px 32px;
            background-color: #fff;
            // display: none;
            box-shadow: 0 2px 3px -1px #ddd;

            .list {
                position: relative;
                z-index: 1;
                overflow: hidden;
                margin-right: -20px;
                margin-bottom: -20px;

                .item {
                    float: left;
                    margin-right: 20px;
                    margin-bottom: 20px;
                    padding: 0 9px;
                    line-height: 27px;
                    letter-spacing: 0;
                    border: 1px solid #7f7f7f;
                    border-radius: 2px;
                    color: #333;
                    font-size: 14px;

                    &.active {
                        border-color: #dd1a21;
                        color: #dd1a21;
                    }
                }
            }
        }
    }
}

.custom-mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 94px;
    bottom: 0;
    z-index: -1;
    width: 100%;
    background: #000;
    opacity: 0.4;
}

.bgc-fff {
    position: absolute;
    top: 94px;
    bottom: 0;
    left: 0;
    z-index:3;
}

/* 无数据 */
.custom-nodata {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    width: 80%;

    .icon {
        display: inline-block;
        width: 106px;
        height: 106px;
        background-size: contain;
        background-repeat: no-repeat;

        &.icon-search {
            background-image: url();
        }
    }

    p {
        font-size: 12px;
        color: #7f7f7f;
        margin-bottom: 5px;
    }
}